<template>
	<uni-popup ref="coupon_pop" @maskClick="handleMastClick" @touchmove.stop.prevent="moveScroll">
		<view class="coupon_pop" :class="'theme'+theme">
			<image class="bg" :src="'/static/restaurant/coupon/cou_bg' + theme +'.png'"></image>
			<view class="title">{{title}}</view>
			<view class="content">{{content}}</view>
			<view class="con_box" v-if="coupon">
				<view class="box_a">
					<view class="box_a_a">
						<text v-if="coupon.type == 1">￥</text>
						<text class="price">{{Number(coupon.price)}}</text>
						<text v-if="coupon.type == 2">折</text>
					</view>
					<text v-if="coupon.type == 1" class="box_a_b">满{{Number(coupon.ordermoney)}}可用</text>
					<text v-if="coupon.type == 2" class="box_a_b">满{{Number(coupon.ordermoney)}}打{{Number(coupon.price)}}折</text>
				</view>
				<view class="box_b"></view>
				<view class="box_c">
					<view class="box_c_1">{{coupon.name}}</view>
					<view class="box_c_2">有效期 {{coupon.endtime ? $util.timeToDate(coupon.endtime,2) :'无限制'}}</view>
				</view>
			</view>
			<view class="note">领取后可在我的优惠券中查看</view>
			<view class="btn" @click="get">
				<image class="bg" :src="'/static/restaurant/coupon/cou_btn_' + theme +'.png'"></image>
				<text>立即领取</text>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 's-coupon-popup',
		data() {
			return {
				show: false
			};
		},
		props: {
			theme: {
				type: String | Number,
				required: false,
				default: '1'
			},
			coupon: {
				type: Object
			},
			title: {
				type: String,
				required: false,
				default: ''
			},
			content: {
				type: String,
				required: true,
				default: ''
			}
		},
		watch: {
			show(val) {
				if (val) {
					this.$refs.coupon_pop.open()
				} else {
					this.$refs.coupon_pop.close()
				}
			}
		},
		methods: {
			moveScroll() {
				
			},
			get() {
				this.$emit('getClick')
			},
			handleMastClick() {
				this.show = false
			}
		}
	}
</script>

<style scoped>
	.theme1 {
		width: 670rpx;
		height: 695rpx;
	}

	.theme1 .title {
		display: none;
	}

	.theme1 .btn {
		width: 282rpx;
		height: 80rpx;
		position: relative;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
	}

	.theme1 .btn text {
		font-size: 36rpx;
		font-weight: 500;
		color: #E62335;
		margin-top: 14rpx;
	}

	.theme1 .content {
		margin-top: 188rpx;
		color: #FDC065;
		font-size: 48rpx;
	}

	.theme1 .con_box {
		margin-top: 40rpx;
		width: 452rpx;
		border-radius: 8rpx;
		height: 134rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		background-color: #fff;
		display: flex;
	}

	.theme1 .note {
		margin-top: 24rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.theme1 .box_a {
		width: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #FB4B4E;
		background-image: radial-gradient(circle at right top, #F75F49, #F75F49 10px, transparent 10px),
			radial-gradient(circle at right bottom, #DB3939, #DB3939 10px, transparent 10px);
	}


	.theme1 .box_a_a text {
		font-size: 24rpx;
	}

	.theme1 .box_a_b {
		font-size: 22rpx;
		margin-top: 4rpx;
	}

	.theme1 .box_a_a .price{
		font-size: 32rpx;
		font-weight: bold;
	}
	.theme1 .box_b {
		height: 80rpx;
		border-left: 1px dashed #FB4B4E;
		margin-top: 28rpx;
		margin-left: -2rpx;
	}

	.theme1 .box_c {
		width: 290rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FB4B4E;
		padding: 0 24rpx;
		background-image: radial-gradient(circle at left top, #F75F49, #F75F49 10px, transparent 10px),
			radial-gradient(circle at left bottom, #DB3939, #DB3939 10px, transparent 10px);
	}

	.theme1 .box_c_1 {
		color: #000000;
		font-size: 28rpx;
	}

	.theme1 .box_c_2 {
		color: #999999;
		font-size: 22rpx;
		margin-top: 14rpx;
		padding-top: 14rpx;
		border-top: 1px dashed #999
	}

	.theme2 {
		width: 695rpx;
		height: 648rpx;
	}

	.theme2 .btn {
		width: 297rpx;
		height: 80rpx;
		position: relative;
		margin-top: 138rpx;
		display: flex;
		justify-content: center;
	}

	.theme2 .btn text {
		font-size: 36rpx;
		font-weight: 500;
		color: #C00E30;
		margin-top: 14rpx;
	}

	.theme2 .title {
		margin-top: 6rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.theme2 .content {
		margin-top: 24rpx;
		color: #A66F12;
		font-size: 40rpx;
	}

	.theme2 .con_box {
		margin-top: 40rpx;
		width: 452rpx;
		border-radius: 8rpx;
		height: 134rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		background-color: #fff;
		display: flex;
	}

	.theme2 .note {
		margin-top: 40rpx;
		color: #D91338;
		font-size: 26rpx;
	}

	.theme2 .box_a {
		width: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #FB4B4E;
		background-image: radial-gradient(circle at right top, #faebd4, #faebd4 10px, transparent 10px),
			radial-gradient(circle at right bottom, #f8e0b4, #f8e0b4 10px, transparent 10px);
	}

	.theme2 .box_a_a text {
		font-size: 24rpx;
	}

	.theme2 .box_a_b {
		font-size: 22rpx;
		margin-top: 4rpx;
	}

	.theme2 .box_a_a .price{
		font-size: 32rpx;
		font-weight: bold;
	}

	.theme2 .box_b {
		height: 80rpx;
		border-left: 1px dashed #FB4B4E;
		margin-top: 28rpx;
		margin-left: -1rpx;
	}

	.theme2 .box_c {
		width: 290rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FB4B4E;
		padding: 0 24rpx;
		background-image: radial-gradient(circle at left top, #faebd4, #faebd4 10px, transparent 10px),
			radial-gradient(circle at left bottom, #f8e0b4, #f8e0b4 10px, transparent 10px);
	}

	.theme2 .box_c_1 {
		color: #000000;
		font-size: 28rpx;
	}

	.theme2 .box_c_2 {
		color: #999999;
		font-size: 22rpx;
		margin-top: 14rpx;
		padding-top: 14rpx;
		border-top: 1px dashed #999
	}

	.coupon_pop {
		position: relative;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.coupon_pop image {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}
</style>